<template>
    <div class="contariner">
        <div class="header">
            <div>
                <el-button @click="$router.back()" color="#626aef"> <el-icon :size="20" color="#CCCC">
                        <Back />
                    </el-icon> 返回</el-button>

            </div>
        </div>
        <div class="main">
            <div class="left">
                <div class="img">
                    <img :src="phone.coverSrc" alt="">
                </div>

            </div>
            <div class="right">
                <div class="info">
                    <div class="key">
                        <div class="key-item">{{ '名字：' }}</div>
                        <div class="key-item">{{ '品牌：' }}</div>
                        <div class="key-item">{{ '类型：' }}</div>
                        <div class="key-item">{{ '内存：' }}</div>
                        <div class="key-item">{{ '硬盘：' }}</div>
                        <div class="key-item">{{ '颜色：' }}</div>
                        <div class="key-item">{{ '价格：' }}</div>
                        <div class="key-item">{{ '数量：' }}</div>
                        <div class="key-item">
                            <el-button color="#626aef" plain @click="addShoppingCar">加入购物车</el-button>
                        </div>
                    </div>
                    <div class="value">
                        <div class="key-item">{{ phone.phoneName }}</div>
                        <div class="key-item">{{ phone.brandName }}</div>
                        <div class="key-item">{{ phone.typeName }}</div>
                        <div class="key-item">{{ phone.memory }}</div>
                        <div class="key-item">{{ phone.disk }}</div>
                        <div class="key-item">{{ phone.color }}</div>
                        <div class="key-item">{{ phone.price }}</div>
                        <div class="key-item"> <el-input-number size="small" v-model="purchaseNum" :min="1" :max="10" />
                        </div>
                        <div class="key-item">
                            <el-button color="#626aef" @click="purchase">购买</el-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="comment-out">
            <div class="comment">
                <div class="line">
                    <div ref="divH" @click="commnents = true" class="ic"
                        style="display: flex; font-size: 20px; flex-direction: column; justify-content: center; align-items: center;">
                        <div>用户评论</div>
                    </div>
                    <div ref="divH2" @click="commnents = false" class="ic"
                        style="display: flex; font-size: 20px;  flex-direction: column; justify-content: center; align-items: center;">
                        手机描述</div>
                </div>
                <div v-if="commnents" class="commentbox">
                    <div v-if="commnets.length == 0">
                        <el-empty description="还没有用户来评论哦，快去买一个来留下足迹吧～" />
                    </div>
                    <div v-for="item in commnets" class="commentitem">
                        <div class="username">{{ item.userName }}: <span style="font-size: small;">{{
                            item.createTime.substring(0, 10) }}</span>

                            <el-rate v-model="item.rate" disabled show-score text-color="#ff9900"
                                score-template="{value} 分" />
                        </div>
                        <p class="msg"> <span>{{ item.msg }}</span></p>
                    </div>
                </div>
                <div v-else class="commentbox">
                    {{
                        phone.des }}
                </div>
            </div>
        </div>


    </div>

    <el-dialog v-model="resure" title="生成订单" width="30%">
        <div>
            <div>收货人：{{ store.getUser().value.userName }}</div>
            <div>收货地址：{{ store.getUser().value.address }}</div>
            <div>电话号码：{{ store.getUser().value.phoneNumber }}</div>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="resure = false">取消</el-button>
                <el-button type="primary" @click="doPurchase">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { onMounted, ref, toRaw } from 'vue'
import { useRoute } from 'vue-router';
import { getPhoneById } from '../api/phone'
import { getComment } from '../api/comment'
import { useUserStore } from '@/stores/counter';
import { addShoppingCarAPi } from '../api/shoppingCar'
import { ElMessage } from 'element-plus';
import { purchaseApi } from '../api/user'

const store = useUserStore()
const route = useRoute()

const divH = ref<HTMLDListElement>()
const divH2 = ref<HTMLDListElement>()

const commnents = ref(true)



const phone = ref()
const commnets = ref<Array<any>>([])


onMounted(() => {
    divH.value?.addEventListener('click', () => {
        divH.value!.style.backgroundColor = '#CFD3DC'
        divH2.value!.style.backgroundColor = '#E5EAF3'
    })
    divH2.value?.addEventListener('click', () => {
        divH.value!.style.backgroundColor = '#E5EAF3'
        divH2.value!.style.backgroundColor = '#CFD3DC'
    })
})
const addShoppingCar = () => {

    addShoppingCarAPi({
        userName: store.getUser().value.userName,
        phoneId: route.query.id
    }).then(res => {
        if (res.data.code == 200) {
            ElMessage({
                message: res.data.msg,
                type: 'success'
            })
        } else {
            ElMessage({
                message: res.data.msg,
                type: 'error'
            })
        }
    })

}

const purchaseNum = ref(0)
getPhoneById(route.query.id).then(res => {
    phone.value = res.data.data
})
getComment(route.query.id).then(res => {
    commnets.value = res.data.data
})

const resure = ref(false)
const purchase = () => {
   var user =  toRaw(store.getUser().value)
    console.log(user);
    
    if(user.address == undefined || user.phoneNumber == undefined ||user.address == '' || user.phoneNumber == ''){
        ElMessage({
                message: '请你完善信息',
                type: 'error'
            })
        return;
    }
    resure.value = true


}

const doPurchase = () => {
    resure.value = false
    var user =  toRaw(store.getUser().value)
    console.log(user);
    
    if(user.address == undefined || user.phoneNumber == undefined || user.address.length == 0 || user.phoneNumber.length == 0){
        ElMessage({
                message: '请你完善信息',
                type: 'error'
            })
        return;
    }
    purchaseApi({
        userName: store.getUser().value.userName,
        phoneId: route.query.id,
        num: purchaseNum.value
    }).then(res => {
        if (res.data.code == 200) {
            ElMessage({
                message: res.data.msg,
                type: 'success'
            })
        } else {
            ElMessage({
                message: res.data.msg,
                type: 'error'
            })
        }
    })
}
</script>

<style scoped >
.contariner {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.header {
    height: 100px;
}

.main {
    display: flex;
    flex-direction: row;
    height: 500px;
    width: 1000px;
    margin: 0 auto;
}

.left {
    width: 50%;
}

.img {
    width: 80%;
    overflow: hidden;

}

img {
    height: 500px;
}

.right {
    flex: 1;
}

.info {
    display: flex;
    flex-direction: row;
    height: 500px;
}

.key {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.key-item {
    margin: 0 auto;
    height: 200px;
}

.value {
    display: flex;

    flex-direction: column;
    justify-content: space-between;
}

.comment-out {
    flex: 1;
    margin-top: 10px;
}

.comment {
    height: 100%;
    border: 1px solid #CCC;
    width: 1000px;
    margin: 0 auto;
}

.line {
    height: 50px;
    background-color: #E5EAF3;
    display: flex;
    flex-direction: row;
    justify-content: start;
    width: 1000px;
    margin: 0 auto;
}

.ic {
    width: 50%;
    cursor: pointer;
}

/* .ic:active{
    background-color: #CFD3DC;
} */
.commentbox {
    width: 1000px;
    margin: 0 auto;
    height: 100%;
    background-color: #ffffff;

}

.commentitem {

    border: 1px solid #CCC;
    margin-bottom: 10px;
    border-radius: 80px;
}

.username {
    margin-left: 20px;
}

.msg {
    margin-left: 40px;
}</style>